<template>
  <div class="icon-test">
    <h3>Element Plus 图标测试</h3>
    
    <!-- 测试1: 直接使用已注册的图标组件 -->
    <div class="test-item">
      <p>测试1: 直接使用图标组件</p>
      <el-icon><House /></el-icon>
      <el-icon><Document /></el-icon>
      <el-icon><List /></el-icon>
    </div>
    
    <!-- 测试2: 使用字符串名称通过component:is -->
    <div class="test-item">
      <p>测试2: 通过component:is使用字符串</p>
      <el-icon><component :is="'House'" /></el-icon>
      <el-icon><component :is="'Document'" /></el-icon>
      <el-icon><component :is="'List'" /></el-icon>
    </div>
    
    <!-- 测试3: 使用ElementPlusIconsVue对象 -->
    <div class="test-item">
      <p>测试3: 使用ElementPlusIconsVue对象</p>
      <el-icon><component :is="ElementPlusIconsVue.House" /></el-icon>
      <el-icon><component :is="ElementPlusIconsVue.Document" /></el-icon>
      <el-icon><component :is="ElementPlusIconsVue.List" /></el-icon>
    </div>
    
    <!-- 测试4: 使用变量存储字符串名称 -->
    <div class="test-item">
      <p>测试4: 使用变量存储字符串</p>
      <el-icon><component :is="houseIcon" /></el-icon>
      <el-icon><component :is="documentIcon" /></el-icon>
      <el-icon><component :is="listIcon" /></el-icon>
    </div>
    
    <!-- 测试5: 使用变量存储组件对象 -->
    <div class="test-item">
      <p>测试5: 使用变量存储组件对象</p>
      <el-icon><component :is="houseIconObj" /></el-icon>
      <el-icon><component :is="documentIconObj" /></el-icon>
      <el-icon><component :is="listIconObj" /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { House, Document, List } from '@element-plus/icons-vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'

// 使用变量存储图标信息
const houseIcon = 'House'
const documentIcon = 'Document'
const listIcon = 'List'

const houseIconObj = ElementPlusIconsVue.House
const documentIconObj = ElementPlusIconsVue.Document
const listIconObj = ElementPlusIconsVue.List
</script>

<style scoped>
.icon-test {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.test-item {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.el-icon {
  margin-right: 10px;
  font-size: 24px;
}
</style>